<template>
  <div class="bar">
    <div class="right">
      <t-button theme="primary" @click="onForm({})">
        <template #icon><t-icon name="add" /></template>
        {{ $t('common.create') }}
      </t-button>
      <Imports :option="importsOption" :handle="importsHandle">
        <template #default="{ open }">
          <t-button theme="primary" @click="open()" variant="outline" style="margin-left: 20px" >
            <template #icon><t-icon name="upload" /></template>
            {{ $t('common.import') }}
          </t-button>
        </template>
      </Imports>
    </div>
    <div class="title">{{ plugin.t('nav.goods') }}</div>
  </div>
  <div class="box">
    <Menu />
    <div class="box bg-box">
      <t-button shape="square" variant="outline" @click="goodsStore.get" style="float: right">
        <template #icon>
          <t-icon name="refresh" />
        </template>
      </t-button>
      <t-form layout="inline" style="margin-bottom: 20px">
        <t-form-item label-width="0">
          <t-select v-model="goodsStore.where.key">
          <t-option value="number" :label="plugin.t('form.number')" />
            <t-option value="name" :label="plugin.t('form.name')" />
            <t-option value="sname" :label="plugin.t('form.sname')" />
            <t-option value="code" :label="plugin.t('form.code')" />
          </t-select>
        </t-form-item>
        <t-form-item label-width="0">
          <t-input v-model="goodsStore.where.value">
            <template #prefix-icon>
              <t-icon name="search" />
            </template>
          </t-input>
        </t-form-item>
        <t-form-item label-width="0">
          <SupplierSelect v-model="data.supplier_id" />
        </t-form-item>
        <t-form-item label-width="0">
          <t-button theme="default" @click="goodsStore.reset(1)">{{ $t('common.search') }}</t-button>
        </t-form-item>
      </t-form>
      <Table @update="onForm" @count="data => count.open(data)" @delete="onDelete" />
      <Count ref="count" />
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import goodsStore from '../../store'
  import menuStore from '../../store/menu'
  import taxStore from '@/plugin/config/store/tax'
  import Menu from '../menu/index.vue'
  import Table from './table.vue'
  import Count from '../count/index.vue'
  import Imports from '@/components/imports.vue'
  import SupplierSelect from '@/plugin/supplier/components/select.vue'

  const plugin = index.plugin
  const count = ref()
  const data = goodsStore.data

  const onForm = data => {
    goodsStore.setIndex(data)
    app.router.push('/plugin/goods/goods/form')
  }

  const onDelete = data => {
    app.confirm({
      theme: 'warning',
      header: app.lang.t('common.warning'),
      body: app.lang.t('message.confirm.delete' , { name: data.name }),
      confirmBtn: {
        theme: 'warning',
        content: app.lang.t('common.delete'),
      }
    }, hide => {
      goodsStore.del(data.id).then(res => {
        app.message('success', 'message.' +  res.message)
        hide()
      }).catch(res => {
        app.message('error', 'message.error.' + res.message)
      })
    })
  }

  const importsOption = {
    code: plugin.t('form.code'),
    number: plugin.t('form.number'),
    name: plugin.t('form.name'),
    price: plugin.t('form.price'),
    menu_id: plugin.t('form.menu'),
    tax_id: plugin.t('form.tax_id'),
    count: plugin.t('form.count'),
    sname: plugin.t('form.sname'),
    price_discount: plugin.t('form.price_discount'),
    price_cost: plugin.t('form.price_cost'),
    unit: plugin.t('form.unit'),
    unit_count: plugin.t('form.unit_count'),
    count_min: plugin.t('form.count_min'),
    count_max: plugin.t('form.count_max'),
  }

  const importsHandle = async (data) => {
    if(!data.code || !data.number) {
      throw new Error(plugin.t('message.import.code_number'))
    }
    if(data.menu_id) {
      const menu = menuStore.name(data.menu_id)
      if(menu) {
        data.menu_id = menu.id
      } else {
        throw new Error(plugin.t('message.import.menu', data))
      }
    }
    if(data.tax_id) {
      const tax = taxStore.name(data.tax_id)
      if(tax) {
        data.tax_id = tax.id
      } else {
        throw new Error(plugin.t('message.import.tax', data))
      }
    }
    
    try{
      await goodsStore.cover(data)
    } catch(e) {
      throw new Error(plugin.t('message.import.error', data))
    }
  }

  taxStore.get()
</script>